<template>
  <div class="card-phone-view" :style="{ transform: 'scale(' + scale + ') translate(-50%, -50%)' }">
    <div class="card-edit-container">
      <div class="card-phone-panel" @click="onLayoutClick">
        <div class="card-phone-panel-box">
          <div class="card-phone-panel-box-close">
            <el-icon><close /></el-icon>
          </div>

          <div class="card-phone-panel-box-list">
            <template :key="item.itemid + '_' + index" v-for="(item, index) in list">
              <div class="card-unit">
                <component :index="index" :item="item" :is="'Panel' + item.panel_type"></component>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import PanelComponentsGather from '@/views/card/js/mixins/panel-components-gather';
  export default {
    name: 'PanelView',
    mixins: [PanelComponentsGather],
    props: {
      list: {
        type: Array,
        default: [],
      },
      scale: Number,
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/scss/panel.scss';

  .card-phone-view {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 375px;
    height: 603px;
    background: #f2f2f2;
    transform-origin: 0 0;
    overflow: hidden;
  }

  .card-edit-container {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
  }

  .card-unit {
    position: relative;
    width: 100%;
    border: 1px solid #f2f2f2;
    // background: #fff;
    margin-bottom: 9px;

    &:last-child {
      margin-bottom: 0;
    }

    &::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
    }
  }
</style>
